import React from 'react'
import { NavBar } from 'antd-mobile'

// 导入 withRouter 高阶组件
import {withRouter} from 'react-router-dom'

// 导入props校验包
import PropsType from 'prop-types'

import './index.css'

/*
    注意： 这个组件并不是直接通过 Route 来渲染出来的，所以，该组件的 props 中，无法直接获取到路由信息！！！也就是说只有通过 Route 渲染出来的组件，才能够通过 props 来拿到路由信息.
    1 从react-router-dom 中导入 withRouter 高阶组件
    2 使用 withRouter 高阶组件包装 NavHeader 组件
      目的：包装后，就可以在组件中获取到当前路由信息
    3 从 props 中结构出 history 对象
    4 调用history.go() 实现返回上一页功能
    5 从 props 中解构出 onLeftClick 函数，实现自定义 < 按钮的点击事件
*/

function NavHeader({children,history,onLeftClick}) {
    // 默认行为
    const defaultHandler = () => history.go(-1)
    return (
        <NavBar
            className="navbar"
            mode="light"
            icon={<i className="iconfont icon-back" />}
            onLeftClick={onLeftClick || defaultHandler}>
            {children}
        </NavBar>
    )
}

NavHeader.PropsType = {
    children: PropsType.string.isRequired,
    onLeftClick: PropsType.func
}

// withRouter(NavHeader) 函数的返回值也是一个组件
export default withRouter(NavHeader)